<template>
  <div class="data-list-box" :class="className">
    <div v-html="css"></div>
    <div class="count-box">
      <div class="no-data" v-if="datas.show_list <= 0">
        请选择显示数据
      </div>
      <div v-for="item in datas.show_list" :key="item.value" class="count-item">
        <i class="iconfont icon-submit"></i><span class="data-title">{{item.label}}：</span><span
          class="price">xxx</span>
      </div>
    </div>
  </div>
</template>

<script>
	// 自定义样式
	const css = function () {
		if (this.datas.preview_color) {
			const {
				padding_top,
				padding_bottom,
				padding_left,
				padding_right,
				preview_color,
				font_size,
				font_color
			} = this.datas;

			return `
		    .component-c${this.parent_id}-${this.id} .count-box {
		        background-color: ${preview_color.color};
		        background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
		        background-size: 100% 100%;
		        background-position: center;
		        background-repeat: no-repeat;
		        padding-top: ${padding_top}px;
            padding-bottom: ${padding_bottom}px;
            padding-left: ${padding_left}px;
            padding-right: ${padding_right}px;
		    }

		    .component-c${this.parent_id}-${this.id} .count-box{
		        font-size: ${font_size}px;
		        color: ${font_color};
		    }
		`;
		}
	};

	export default {
		props: ["id", "parent_id", "datas"],
		data() {
			return {};
		},
		mounted() {
		},
		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = ["component-wrapper", `component-c${this.parent_id}-${this.id}`];
				return name;
			},
		},
		methods: {},
	};
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .count-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }

  .count-item {
    width: 50%;
    padding: 5px 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .no-data {
    width: 100%;
    padding: 5px;
    text-align: center;
  }
</style>
